<template>
    <div class="table">
        <div class="container">
            <div style="margin-bottom: 15px;margin-top: 15px;">
                <el-button type="primary" @click="addGroup">新增</el-button>
                <el-button type="success" @click="edit">修改</el-button>
                <el-button type="danger" @click="del">删除</el-button>
                <el-button type="primary" @click="division">设备划分</el-button>
            </div>
            <!--            设备分组-->
            <div class="radio-select-style">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        style="width: 100%;margin-bottom: 20px;"
                        border  stripe
                        height="300"
                        @row-click="handleSelectionChangeRow">
                    <!--                        @selection-change="handleSelectionChange">-->
                    <el-table-column type="selection" width="55" disabled="true"></el-table-column>
                    <el-table-column prop="groupName" label="名称"></el-table-column>
                    <el-table-column prop="groupCode" label="所属性质"></el-table-column>
                    <el-table-column prop="deviceNum" label="设备数"></el-table-column>
                    <!--                    <el-table-column prop="address" label="协议类型"></el-table-column>-->
                    <el-table-column prop="dataCollectorName" label="所属集组织"></el-table-column>
                    <el-table-column prop="remark" label="简介"></el-table-column>
                </el-table>
            </div>
            <!--            自定义分组-->

            <v-echild v-if="tabIndexActive == 'first'" :parentData="parentDataList" v-on:ListenChild="ListenChild"></v-echild>
        </div>


        <!--        新增设备组-->
        <el-dialog :title="diologTitle" :visible.sync="addVisible" width="70%">
            <div style="">
                <el-form label-width="120px" style="">
                    <el-form-item label="所属组织" class="limit-width">
                        <el-select v-model="baseForm.dataCollector" placeholder="请选择">
                            <el-option v-for="item in selectConcentrator" :key="item.deviceId" :label="item.deviceName" :value="parseInt(item.deviceId)"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="名称" class="limit-width">
                        <el-input v-model="baseForm.groupName" style="width:35.5%"></el-input>
                    </el-form-item>
                    <el-form-item label="所属性质">
                        <el-checkbox-group v-model="baseForm.type">
                            <el-checkbox label="图表分析"></el-checkbox>
                            <el-checkbox label="统计报表"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="描述信息" class="limit-width">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="baseForm.remark" style="width: 70%;">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form')">确 定</el-button>
            </span>
        </el-dialog>

        <!--        设备划分-->
        <el-dialog title="设备组划分" :visible.sync="isShowDivision" width="70%" >
            <div style="">
                <v-edivision :parentData="parentData" :isShowDivision="isShowDivision"></v-edivision>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowDivision = false">返 回</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { getDeviceGroupExtendInfo,getAllCollector,addDeviceGroup,delDeviceGroup,updateDeviceGroup,allocateStrategyToGroup} from '../../../api/index';
    import {clearObjValue} from '../../common/com';
    import vEchild from './SelfEditTableChild.vue';
    import vEdivision from '../dataDictionary/equipmentDivision.vue';
    export default {
        name: "",
        components:{
            vEchild,vEdivision
        },
        data() {
            return {
                tableData: [],
                tabIndexActive:'first',
                diologTitle:'新增设备组',
                addVisible:false,
                isShowDivision:false,
                isShowPolicy:false,
                multipleSelection:[],
                baseForm:{
                    groupName:'',
                    dataCollector:'',
                    remark:'',
                    type:[],
                },
                selectConcentrator:[],
                isEidt:false,
                parentData:'',
                parentDataList:'',
                statData:[],
                dialogVisible:false,
                groupBtnIndex:0
            }
        },
        created(){
            this.getData();
        },
        watch:{
            parentDataList:(val)=>{
                console.log(val)
            }
        },


        methods:{
            ListenChild(val){
                console.log(val)
                this.statData = val;
            },
            //获取设备组列表
            getData(){
                getDeviceGroupExtendInfo({}).then((res)=>{
                    console.log(res)
                    this.tableData = res.datas;
                    this.parentDataList = res.datas[0].id;
                })
            },
            //切换tab
            handleClick(tab, event) {
                console.log(tab.name);
            },
            //添加分组
            addGroup(){
                this.addVisible = true;
                this.isEidt = false;
                this.baseForm = clearObjValue(this.baseForm)
                this.getAllCollectorType();
            },
            //保存数据
            saveEdit(){
                if(this.isEidt){
                    var editPostData = this.multipleSelection[0];
                    editPostData['remark'] = this.baseForm.remark;
                    editPostData['groupCode'] = this.baseForm.groupCode;
                    editPostData['dataCollector'] = this.baseForm.dataCollector;
                    editPostData['groupName'] = this.baseForm.groupName;
                    console.log(editPostData)
                    updateDeviceGroup(editPostData).then((res)=>{
                        if(res.success){
                            this.addVisible = false;
                            this.getData();
                            this.$message.success(res.message)
                        }else{
                            this.$message.error(res.message)
                        }

                    })
                    return ;
                }
                if(!this.baseForm.dataCollector){
                    this.$message.error('请选择集中器');
                    return;
                }
                if(!this.baseForm.groupName){
                    this.$message.error('请输入名称');
                    return;
                }
                if(!this.baseForm.groupCode){
                    this.$message.error('请输入编号');
                    return;
                }
                addDeviceGroup(this.baseForm).then((res)=>{
                    if(res.success){
                        this.addVisible = false;
                        this.$message.success(res.message);
                        this.getData();
                    }else{
                        this.$message.error(res.message)
                    }
                })
            },
            groupConfig(v){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能选择一个设备组');
                    return;
                }
                this.dialogVisible = true;
                this.groupBtnIndex = v;
                console.log(this.multipleSelection)


            },

            //弹出设备划分弹窗
            division(){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能选择一个设备组');
                    return;
                }
                this.isShowDivision = true;
            },
            // 设备分组选中切换
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.parentDataList = this.multipleSelection[0].id;
                this.parentData = this.multipleSelection;

                console.log(this.multipleSelection)
                this.$refs.multipleTable.clearSelection()

            },
            //设备分组整行选中
            handleSelectionChangeRow(row, column, event){
                this.multipleSelection = [row];
                this.parentData =  this.multipleSelection;
                this.parentDataList =  this.multipleSelection[0].id;
                this.parentDataList = row.id;
                this.$refs.multipleTable.clearSelection();
                this.$refs.multipleTable.toggleRowSelection(row);
                // this.$refs.multipleTable.toggleRowSelection(row);



                // this.$refs.multipleTabel.clearSelection();
            },


            //获取网关下拉
            getAllCollectorType(){
                getAllCollector({
                }).then((res) =>{
                    console.log(res)
                    this.selectConcentrator =res.datas;
                    console.log(this.selectConcentrator)
                })
            },
            //修改设备组
            edit(){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择需要修改的设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能修改一个设备组');
                    return;
                }
                this.addVisible = true;
                this.isEidt = true;

                this.baseForm = {
                    groupCode:this.multipleSelection[0].groupCode,
                    groupName:this.multipleSelection[0].groupName,
                    dataCollector:this.multipleSelection[0].dataCollector,
                    remark:this.multipleSelection[0].remark,
                }
                this.getAllCollectorType();
            },
            del(){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择需要删除的设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能删除一个设备组');
                    return;
                }
                // var ids = [];
                // for(var i = 0;i<this,multipleSelection.length;i++){
                //     ids.push(this.multipleSelection[i].id);
                // }
                delDeviceGroup({id:this.multipleSelection[0].id}).then((res)=>{
                    if(res.success){
                        this.getData();
                        this.$message.success(res.message)
                    }else{
                        this.$message.error(res.message)
                    }
                })
            },
            saveStrategy(v){
                if(this.$refs.childData.tableList.length<=0){
                    this.$message.error('请选择策略');
                    return ;
                }

                // console.log(this.multipleSelection[0])
                // console.log(this.$refs.childData.tableList[0])
                allocateStrategyToGroup({
                    strategyId:this.$refs.childData.tableList[0].id,
                    groupId:this.multipleSelection[0].id
                }).then((res)=>{
                    if(res.success){
                        this.$message.success(res.message);
                        this.isShowPolicy = false;
                        this.getData();
                    }else{
                        this.$message.error(res.message);
                    }
                })
            },

        },

    }
</script>

<style scoped>
    /deep/ .radio-select-style thead  .el-table-column--selection .cell{
        display: none;
    }
    /deep/ .radio-select-style tbody .el-table-column--selection .cell{
        pointer-events:none
    }
</style>